<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>开放平台-第三方授权</title>
    <link th:href="@{/plugins/roboto-fontface/css/roboto/roboto-fontface.css}" rel="stylesheet">
    <link th:href="@{/plugins/mdi/font/css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/plugins/vuetify/vuetify.min.css}" rel="stylesheet">
</head>

<body>
<div id="app">
    <v-app>
        <v-app-bar app color="blue darken-3" dark>
            <v-toolbar-title class="mx-auto font-weight-bold text-h5">开放平台 第三方授权</v-toolbar-title>
        </v-app-bar>
        <v-main class="grey lighten-3">
            <v-container>
                <v-row>
                    <v-col cols="12" sm="3"></v-col>
                    <v-col cols="12" sm="6">
                        <form id="approval" action="/oauth/authorize" method="post">
                            <v-sheet min-height="60vh" rounded="lg">
                                <v-toolbar flat height="30"> </v-toolbar>
                                <v-card flat>
                                    <v-card-title>
                                        <span class="mx-auto font-weight-bold text-h5">服务授权</span>
                                    </v-card-title>
                                    <v-card-text>
                                        <v-img src="../approval/static/confirm/logo.svg" class="mb-5 mt-3" contain height="100" />
                                    </v-card-text>
                                    <v-card class="d-flex align-center justify-center mx-auto" flat>
                                        <div class="font-weight-bold text-h5">应用，申请获取授权</div>
                                    </v-card>
                                    <v-divider class="mt-3"></v-divider>
                                    <v-card-text>
                                        <v-card flat>
                                            <v-card-title class="headline text-subtitle-1">授权后，该应用将获得以下权限</v-card-title>
                                            <v-card-text class="pb-0">
                                                <v-badge color="grey lighten-1" dot inline left>
                                                    <input type="hidden" />
                                                    Listen to your favorite artists and albums whenever and
                                                    wherever, online and offline.
                                                </v-badge>

                                            </v-card-text>
                                            <v-card-actions>
                                                <v-checkbox class="ml-1" v-model="checked" disabled dense hide-details><template v-slot:label>
                                                    <div>
                                                        已阅读和同意
                                                        <a target="_blank" href="http://vuetifyjs.com" @click.stop>
                                                            《服务条款》
                                                        </a>
                                                    </div>
                                                </template>
                                                </v-checkbox>
                                            </v-card-actions>
                                        </v-card>
                                    </v-card-text>
                                </v-card>
                            </v-sheet>
                        </form>
                    </v-col>
                    <v-col cols="12" sm="3"></v-col>
                </v-row>
            </v-container>
        </v-main>
    </v-app>
</div>

<script th:src="@{/plugins/vue/vue.min.js}"></script>
<script th:src="@{/plugins/vuetify/vuetify.js}"></script>
<script>
    new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: () => ({
            checked: true,
            approval: false
        }),
    })
</script>
</body>
</html>
